<template>
  <div class="app-container">
    <div style="width: 100%">
      <div style="margin-bottom: 50px">
        <el-select v-model="departId" placeholder="请选择考勤部门" @change="modDepart">
          <el-option
            v-for="item in departList"
            :key="item.departId"
            :label="item.name"
            :value="item.departId"
          />
        </el-select>

        <el-date-picker
          v-model="monthVal"
          type="month"
          placeholder="选择考勤月份"
          value-format="yyyy-M"
          @change="modMonthVal"/>
      </div>
      <div v-if="!hideChart">
        <div v-if="departId!== '' && currentMonth !== 0 && currentYear !== 0 " class="module-div">
          <span>
            <ve-line :data="chartData" :settings="chartSettings"/>
          </span>
          <span class="comment"><span
            style="color: sienna"> {{ currentYear }} 年 {{ currentMonth }} 月</span>考勤记录折线统计图 <span
            style="color: royalblue">【 {{ departName }} 】</span> </span>
        </div>
      </div>

    </div>

  </div>
</template>

<script>/* eslint-disable indent */

import { getMonthAttends } from '../../../../api/attend'
import { getAllDepartments } from '../../../../api/department'

export default {

  data() {
    return {

      attendMonthList: [],
      departList: [],
      departMap: new Map(),

      // 各部门员工所占比例
      chartSettings: {
        labelMap: {
          Date: '部门名称',
          LateIn030: '迟到0-30分钟',
          LateG30: '迟到>30分钟',
          EarlyIn030: '早退0-30分钟',
          EarlyG30: '早退>30分钟',
          IllAbsence: '病假',
          ThingAbsence: '事假',
          PubHoliday: '公休'
        },
        xAxisType: 'time'
      },
      chartData: {
        columns: ['Date', 'LateIn030', 'LateG30', 'EarlyIn030', 'EarlyG30', 'IllAbsence', 'ThingAbsence', 'PubHoliday'],
        rows: []
      },

      departName: '',
      hideChart: true,
      // 查询参数
      monthVal: '',
      departId: '',
      currentYear: 0,
      currentMonth: 0

    }
  },
  created() {
    // this.fetchAttendData()
    this.fetchDepartmentData()
  },
  methods: {
    modDepart(value) {
      this.departId = value
      console.log(value)
      this.departName = this.departMap.get(this.departId)
      if (this.currentMonth > 0 && this.currentYear > 0) {
        this.fetchAttendData()
      }
    },
    modMonthVal(value) {
      if (this.departId === '') {
        this.$message.warning('请选择考勤部门')
        return
      }
      const obj = value.split('-')
      const year = obj[0]
      const month = obj[1]
      this.currentYear = year
      this.currentMonth = month
      this.fetchAttendData()
    },
    fetchDepartmentData() {
      getAllDepartments().then(response => {
        this.departList = response.data
        // const keySet = new Set()
        // const newArr = []
        const map = new Map()
        this.departList.forEach((department) => {
          map.set(department.departId, department.name)
        })
        this.departMap = map
      })
    },
    async fetchAttendData() {
      this.listLoading = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      const that = this
      const response = await getMonthAttends(this.currentYear, this.currentMonth, this.departId)
      if (!response.success) {
        that.$message.error(response.message)
        that.hideChart = true
      } else {
        const attendList = response.data
        if (attendList == null || attendList.length === 0) {
          that.$message.warning('该月份没有考勤记录')
          that.hideChart = true
        } else {
          const rowData = []
          attendList.forEach(monthSummary => {
            rowData.push(
              {
                'Date': monthSummary.date,
                'LateIn030': monthSummary.lateIn030,
                'LateG30': monthSummary.lateG30,
                'EarlyIn030': monthSummary.earlyIn030,
                'EarlyG30': monthSummary.earlyG30,
                'IllAbsence': monthSummary.illAbsence,
                'ThingAbsence': monthSummary.hhingAbsence,
                'PubHoliday': monthSummary.pubHoliday
              }
            )
          })
          that.hideChart = false
          that.chartData.rows = rowData
        }
      }
      loading.close()
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .expanded_input {
    width: 555px;
  }

  .module-div {
    text-align: center;
    margin-bottom: 30px;
  }

  .comment {
    color: gray(25);
  }
</style>
